// JavaScript Document
var oDiv=document.getElementById('root');

var oTiao=document.getElementById('tiao');
//播放
var oV=document.getElementById('v');
//进度条条
var oButton=oTiao.getElementsByTagName('button')[0];
var oTiao2=document.getElementById('tiao2');
var oTiao3=document.getElementById('tiao3');
var oQiu=document.getElementById('qiu');
var oSJ=document.getElementById('shij');
//缓冲条
var aHC=new Array();

//音量
var oYL1=document.getElementById('yl1');
var oYL2=document.getElementById('yl2');
var oYL3=document.getElementById('yl3');
var oQiu2=document.getElementById('qiu2');
//放大缩小
var oDX=document.getElementById('max');

var OA=null;
var OAF=null;
var sSJ='NaN';
oQiu2.style.left=oYL2.offsetWidth-oQiu2.offsetWidth+'px';
oYL3.style.width=oQiu2.offsetWidth/2+oQiu2.offsetLeft+'px';
oV.removeAttribute('controls');
oV.Da=null;
oV.HC=0;//缓冲比率
oButton.innerHTML='&#x25BA;';
oV.TL=oButton.innerHTML;//拖动后是否要播放
oYL1.yl=0;
//播放
//oV.addEventListener('durationchange',fnCD);
//当浏览器正在下载指定的音频/视频时，会发生 progress 事件。
//oV.addEventListener('progress',function(){alert(1)});

//控件
fnYC();
oTiao.addEventListener('mouseenter',fnOtiao);
oTiao.addEventListener('mouseleave',fnYC);

//当音频/视频加载后，时长将由 "NaN" 变为音频/视频的实际时长。
oV.addEventListener('loadedmetadata',fnCD);
fnCD();
oV.addEventListener('click',fnClick);
oButton.addEventListener('click',fnClick);
oDX.addEventListener('click',fnDX);
oV.addEventListener('dblclick',fnDX);
//检测是否进入/退出全屏成功
document.addEventListener('fullscreenchange',fnoDivYX);
document.addEventListener('webkitfullscreenchange',fnoDivYX);//谷歌
document.addEventListener('mozfullscreenchange',fnoDivYX);//火狐
document.addEventListener('MSFullscreenChange',fnoDivYX);
document.addEventListener('keypress',function(){return false});
document.addEventListener('keyup',function(){return false});

oDiv.addEventListener('mouseenter',function(){
	document.addEventListener('keydown',fn4);
});
oDiv.addEventListener('mouseleave',function(){
	document.removeEventListener('keydown',fn4);
});
//进度条
oTiao2.addEventListener('click',fnH);
oQiu.addEventListener('mousedown',function(e){//拖动
	TL(e,this,oTiao2);
});
oQiu.addEventListener('click',fnSMR);
//开始播放
oV.addEventListener('play',fnBS);
//播放暂停
oV.addEventListener('pause',fnBS);
//当目前的播放位置已更改时
oV.addEventListener('timeupdate',fnSP);
//开始跳位置（拖动球的手移动是触发）
oV.addEventListener('seeking',fnSP);
//已经跳跳位置（拖动球的鼠标停止移动时触发）
//oV.addEventListener('seeked',fnSP);
//播放结束？
oV.addEventListener('ended',fnOtiao);
//缓冲条
oV.addEventListener('progress',fnHC);//视频下载的时候
oV.addEventListener('canplaythrough',fnHC);//不会因为缓冲而停顿
fnHC();
//console.log(oV.readyState);

//音量条
oYL1.addEventListener('click',fnCYL);
oYL2.addEventListener('click',fnY);
oDiv.addEventListener('mouseenter',fnHLK);
oDiv.addEventListener('mouseleave',fnHLG);
oQiu2.addEventListener('mousedown',function(e){
	TL(e,this,oYL2);
});
oQiu2.addEventListener('click',fnSMR);
//音量改变
oV.addEventListener('volumechange',fnYLGS);
//
function fnSMR(e){e.stopPropagation()}//阻止冒泡
//开关
function fnClick(){
	if(oV.paused){//是否暂停
		oV.play();
	}else{
		oV.pause();
	}
}
function fnBS(){
	if(!oV.paused){
		oButton.innerHTML='&#x2590;&#x2590;';
		oButton.setAttribute('class','min');
	}else{
		oButton.innerHTML='&#x25BA;';
		oButton.setAttribute('class','max');
	}
}

//YL
function fnCYL(){
	if(oV.volume===0){
	   oV.volume=oYL1.yl;
	}else{
		oYL1.yl=oV.volume;
		oV.volume=0;
	}
	fnYLGS();
}
function fnYLGS(){//用当前声音求球的left
    oYL2.setAttribute('title',oV.volume);
	oQiu2.style.left=(oYL2.clientWidth-oQiu2.offsetWidth)*oV.volume+'px';
	fnDM(oQiu2);
}
function fnYL(sy){
	if(0===sy){
		sy=0;
	}
	oV.volume=sy;
	oYL2.setAttribute('title',sy);
}
function fnHL(e){//鼠标滚轮
	v=e||event;
	if(v.wheelDelta){//非火狐
	    fnHLGS(e,'wheelDelta',1200);
	}else{
		fnHLGS(e,'detail',-30);
	}
}
function fnHLGS(e,sSS,mS){
	var v=e||event;
	var yl=oV.volume;
	yl+=v[sSS]/mS;
	if(yl<=0){
		yl=0;
    }
	if(yl>=1){
		yl=1;
	}
	oV.volume=yl;
	e.preventDefault();
}
function fnHLK(){
	document.addEventListener('DOMMouseScroll',fnHL);
	document.addEventListener('mousewheel',fnHL);
}
function fnHLG(){
	document.removeEventListener('DOMMouseScroll',fnHL);
	document.removeEventListener('mousewheel',fnHL);
}
//拖动
function fnH(e){ClickD(e,oQiu,oTiao2)}
function fnY(e){ClickD(e,oQiu2,oYL2)}
function ClickD(e,oA,oAf){
	var mL=e.clientX-oDiv.offsetLeft-oAf.offsetLeft-oA.offsetWidth/2+document.documentElement.scrollLeft;
	//因为火狐全屏下，不算全屏元素.offsetLeft，但算document.documentElement.scrollLeft
	//ie和谷歌全屏下以上两者不算
	if(navigator.userAgent.indexOf('Firefox')>-1 && fnPM()){
		mL-=document.documentElement.scrollLeft;
	}
	var maxL=oAf.clientWidth-oA.offsetWidth;
	if(mL>maxL){
		mL=maxL;
	}
	if(mL<0){
		mL=0;
	}
	oA.style.left=mL+'px';
	ClickQ(oA,oAf);
}

function ClickQ(oA,oAf){//球，父条可用宽度和总时长求当前时间||当前音量
	var BFB=oA.offsetLeft/(oAf.offsetWidth-oA.offsetWidth);
	if(oA.getAttribute('id')==='qiu'){
		oV.currentTime=oV.duration*BFB;
		oSJ.innerHTML=fnFZ(parseInt(oV.currentTime))+sSJ;
	}else{
		fnYL(BFB.toFixed(1));
		oYL1.yl=oV.volume;
	}
}

function TL(e,oA,oAf){
	OA=oA;
	OAF=oAf;
	OA.MQ=e.clientX-OA.offsetLeft;
	if(OA===oQiu&&(oV.TL!==oButton.innerHTML)){
		fnClick();
	   // oButton.removeEventListener('click',fnClick);
	    oV.removeEventListener('pause',fnBS);
	}
	document.addEventListener('mousemove',TL2);
	document.addEventListener('mouseup',TL3);
}
function TL2(e){
	var L=e.clientX-OA.MQ;
	var Max=parseInt(getComputedStyle(OAF).width)-OA.offsetWidth;
	OA.style.background='#06f';
	if(L>Max){
		L=Max;
	}
	if(L<0){
		L=0;
	}
	OA.style.left=L+'px';
	ClickQ(OA,OAF);
}
function TL3(e){
	OA.style.background='';
	if(OA===oQiu&&(oV.TL!==oButton.innerHTML)){
		fnClick();
	    //oButton.addEventListener('click',fnClick);
	    oV.addEventListener('pause',fnBS);
	}
	document.removeEventListener('mousemove',TL2);
	document.removeEventListener('mouseup',TL3);
}
//缓冲部分
function fnHC(){
	if(oV.buffered.length){
		var oVL=oV.buffered.length;
		if(aHC.length<oVL){
			for(var i=aHC.length;i<oVL;i++){
			    aHC[i]=document.createElement('div');
			    aHC[i].setAttribute('class','hc');
			    oTiao2.insertBefore(aHC[i],oTiao3);
			}
		}else if(aHC.length>oVL){
			for(var i=oVL;i<aHC.length;i++){
				oTiao2.removeChild(aHC[i]);
			}
			aHC.length=oVL;
		}
		fnHCGS();
	}
}
function fnHCGS(){
	for(var i=0;i<oV.buffered.length;i++){
		aHC[i].style.left=oV.buffered.start(i)/oV.duration*100+'%';
		aHC[i].style.width=(oV.buffered.end(i)-oV.buffered.start(i))/oV.duration*100+'%';
	}
}

//进度部分
function fnRDM(){
    document.removeEventListener('mousemove',fnH);
	document.removeEventListener('mouseup',fnRDM);
}
function fnRDMY(){
    document.removeEventListener('mousemove',fnY);
	document.removeEventListener('mouseup',fnRDM);
}
//播放条的核心代码
function fnSP(){
	fnJDGS();
	oQiu.style.left=oV.HC*100+'%';//球
	fnDM(oQiu);
	oSJ.innerHTML=fnFZ(parseInt(oV.currentTime))+sSJ;//时间
}
function fnDM(oA){//设置完成条的长度
	oA.previousElementSibling.style.width=oA.offsetLeft+oA.offsetWidth/2+'px';
}
function fnJDGS(){//球的left公式，用宽度和时间得出的比率
	var mD=(oTiao2.offsetWidth-oQiu.offsetWidth)/oTiao2.offsetWidth;
	oV.HC=oV.currentTime/oV.duration*mD;
}


//加减进度条
function fn4(e){
	switch (e.keyCode)
	{
	case 13:
	     fnClick();
		 e.preventDefault();
		 break;
	case 37:
	      oV.currentTime-=15;
		  e.preventDefault();//阻止浏览器的4个箭头的默认事件
		  break;
    case 38:
	      if(oV.volume<=0.9){
	          oV.volume+=0.1;
		  }else{
			   oV.volume=1.0;
		  }
		  e.preventDefault();
		  break;
	case 39:
	      oV.currentTime+=15;
		  e.preventDefault();
		  break;
	case 40:
	      if(oV.volume>=0.1){
	          oV.volume-=0.1;
		  }else{
			  oV.volume=0;
		  }
		  e.preventDefault();
		  break;
	}
}

//全屏
function fnDX(){
	var b='';
	if(!!window.ActiveXObject || "ActiveXObject" in window){
		b=oDiv.className==='rootmax';
	}else{
		b=fnQP();
	}
	if(b){  
	    fnTC();
	}else{
		fnJR(oDiv);  
	}
}
function fnoDivYX(){//设置样式  
    if(!!window.ActiveXObject || "ActiveXObject" in window){
		b=oDiv.className==='rootmin';
	}else{
		var b=fnQP();
	}
	if(b){  
		oDiv.className='rootmax';
	}else{
		oDiv.className='rootmin';
	}
	fnSP();//全屏模式下，进度公式mD会变大，那么需要重新调用一下
}
function fnQP(){//返回全屏元素。火狐和谷歌返回undefined或者元素，一直为undefined
     var fullscreenEle =document.fullscreenElement ||//w3c
     document.mozFullScreenElement ||//火狐
     document.webkitFullscreenElement||//谷歌
	 document.msFullScreenElement;
	 //注意：要在用户授权全屏后才能获取全屏的元素，否则 fullscreenEle为null
	 return fullscreenEle;
}
//该属性返回当前 document 是否进入了可以请求全屏模式的状态.火狐和谷歌返回undefined或者true，ie一直为true
function fnPM(){
      var isFullscreen = document.fullscreenEnabled ||
	  window.fullScreen ||//火狐
	  document.webkitIsFullScreen ||//谷歌
	  document.msFullscreenEnabled;//IE
	  //注意：要在用户授权全屏后才能准确获取当前的状态
	  return isFullscreen;
}
function fnJR(de){//不能用oV本身不然自制的控件无效
	if(de.requestFullscreen){
		de.requestFullscreen();
	}else if(de.mozRequestFullScreen){//火狐
		de.mozRequestFullScreen();
	}else if(de.webkitRequestFullscreen){
		de.webkitRequestFullscreen();//谷歌
	}else if (de.msRequestFullscreen) {
        de.msRequestFullscreen();
     }
}
function fnTC(){
	var de=document;
	if(de.exitFullscreen){
		de.exitFullscreen();
	}else if(de.mozCancelFullScreen){//火狐
		de.mozCancelFullScreen();
	}else if(de.msExitFullscreen){
		de.msExitFullscreen();
	}else if(de.webkitCancelFullScreen){//谷歌
		de.webkitCancelFullScreen();
	}else if (de.msExitRequestFullscreen) {
        de.msExitRequestFullscreen();
    }
	
}

//时间
function fnCD(){//重置时长
	if(sSJ==='/NaN:NaN'||sSJ==='NaN'){
	  sSJ='/'+fnFZ(parseInt(oV.duration));
      oSJ.innerHTML='0:00'+sSJ;
	}
}
function fnFZ(mS){
	var sM='',mF=mM=0;
	if(mS<60){
		mM=mS.toString();
		mM=mM.length===1?'0'+mM:mM;
	}else{
		mF=parseInt(mS/60);
		mM=(mS-60*mF).toString();
		mM=mM.length===1?'0'+mM:mM;
	}
	return sM=mF+':'+mM;
}

//控件的隐藏和出现
function fnKJ(){
	clearTimeout(oV.Da);
	clearInterval(oTiao.oD);
	oTiao.style.visibility='visible';
	oTiao.style.opacity=1;
	oV.Da=setTimeout(function(){
		setStyle(oTiao,{opacity:0},10,function(){
			oTiao.style.visibility='hidden';
			oTiao.style.opacity=1;
		});
	},2000);
}
function fnOtiao(){
	clearTimeout(oV.Da);
	clearInterval(oTiao.oD);
	oDiv.removeEventListener('mouseover',fnKJ);
    oDiv.removeEventListener('mousemove',fnKJ);
	oTiao.style.visibility='visible';
	oTiao.style.opacity=1;
}
function fnYC(){
	oDiv.addEventListener('mouseover',fnKJ);
    oDiv.addEventListener('mousemove',fnKJ);
}
/*function b(i){
	console.log(i+' '+oV.readyState+' '+oV.currentTime+" "+oV.duration);
	console.log(oV.buffered.length);
}
oV.addEventListener('loadstart',function(){b(0)});
oV.addEventListener('durationchange',function(){b(1)});
oV.addEventListener('loadedmetadata',function(){b(2)});
oV.addEventListener('loadeddata',function(){b(3)});
oV.addEventListener('progress',function(){b(4)});
oV.addEventListener('canplay',function(){b(5)});
oV.addEventListener('canplaythrough',function(){b(6)});*/
// 需求
/*function fnA(){//到时暂停播放
	if(oV.currentTime>10){
		oV.pause();
		oV.currentTime=10;
    }
}
oV.addEventListener('timeupdate',fnA);*/
